<template>
    <div class="shuffling">
        <div class="top">
            <table class="topTableStyle">
                <tr>
                    <td class="topTableStyletd" style="width:5%;"><Button type="primary" @click="addShuffling">新增</Button></td>
                    <td colspan="7" style="width:81%;"></td>
                    <td class="topTableStyletd" style="width:5%; padding-right: 1%"><Button type="primary" @click="sortShuffling" style="width:100%">排序</Button></td>
                    <td class="topTableStyletd" style="width:8%;"><Button type="primary" @click="editShufflingKeepTime" style="width:100%;">停留时间</Button></td>
                </tr>
            </table>
        </div>
        <div><hr></div>
        <!-- 表单数据显示 -->
        <Row class="bottom">
            <Table border :columns="shufflingTable" :data="shufflingTableData" :loading="loading" width="1200px"></Table>
        </Row>
        <br>
        <!-- 页码 -->
        <Row style="text-align: right;margin:35px 0">
            <Page :total="shufflingTotal" :current="shufflingCurrent" show-total show-elevator show-sizer :page-size=shufflingPageSize @on-change="changePage" @on-page-size-change="changePageSize"></Page>
        </Row>
        <!-- 新增轮播图 -->
        <Modal 
        v-model="addShufflingList" 
        :mask-closable="false" 
        title="新增" 
        @on-ok="submitAddShuffling" 
        @on-cancel="shufflingCancel" 
        :loading="newShuffling">
            <table class="tablePup">
                <tr>
                    <td class="add-left">
                        <span style="color:red">*</span>
                        <span>序号：</span>
                    </td>
                    <td>
                        <Input :maxlength='6' v-model="edit_shuffling_index" style="width: 200px" placeholder="请输入序号"></Input>
                    </td>
                </tr>
                <tr>
                    <td class="add-left">
                        <span style="color:red">*</span>
                        <span>标题：</span>
                    </td>
                    <td>
                        <Input v-model="edit_shuffling_title" :maxlength='10' placeholder="请输入标题" style="width: 200px"></Input>
                    </td>
                </tr>
                <tr>
                    <td class="add-left">
                        <span style="color:red">*</span>
                        <span>状态：</span>
                    </td>
                    <td>
                        <Select v-model="edit_shuffling_status" style="width:200px">
                            <Option v-for="item in shufflingStatus" :value="item.status" :key="item.status" @on-change="shufflingStatusChange()"></Option>
                        </Select>
                    </td>
                </tr>
                <tr>
                    <td class="add-left">
                        <span style="color:red">*</span>
                        <span>封面图片：</span>
                    </td>
                    <td>
                        <div>
                            <div class="demo-upload-list" v-show="item.url.length > 1" v-for="item in uploadList">
                                <!-- <img :src=item.url> -->
                                <img :src="item.url">
                                <div class="demo-upload-list-cover">
                                    <Icon color="#ff5500" type="close-circled" @click.native="handleRemove(item)"></Icon>
                                </div>
                            </div>
                            <Upload 
                            ref="upload"
                            :show-upload-list="false" 
                            :on-success="handleSuccess"
                            :format="['jpg','jpeg','png']" 
                            :max-size="5120" 
                            :before-upload="handleBeforeUpload" 
                            :on-format-error="handleFormatError" 
                            :on-exceeded-size="handleMaxSize"
                            :on-error="handleError"
                            :on-progress="onProgress" 
                            multiple 
                            type="drag" 
                            :action="this.$store.state.uploadUrl"
                            style="display: inline-block;width:60px;">
                                <div style="width: 60px;height:57px;">
                                    <div style="padding-top: 10px;">
                                        <Icon type="plus-round" size="18" style="color: #aaa"></Icon>
                                    </div>
                                    <div style="font-size:12px; padding-top: -5px;">上传</div>
                                </div>
                            </Upload>
                            <div>(建议上传大小为100×100的图片)</div>
                        </div>
                    </td>
                    <!-- <td>
                        <Input v-model="value" placeholder="请输入详情链接" style="width: 200px"></Input>
                    </td> -->
                </tr>
            </table>
        </Modal>
        <!-- 编辑轮播图 -->
        <Modal v-model="editShufflingList" title="编辑" @on-ok="submitEditShuffling" @on-cancel="shufflingCancel" :mask-closable="false" :loading="newShuffling">
            <table class="tablePup">
                <tr>
                    <td class="add-left">
                        <span style="color:red">*</span>
                        <span>序号：</span>
                    </td>
                    <td>
                        <Input :maxlength='6' :number="true" v-model="edit_shuffling_index" style="width: 200px" placeholder="请输入序号"></Input>
                    </td>
                </tr>
                <tr>
                    <td class="add-left">
                        <span style="color:red">*</span>
                        <span>标题：</span>
                    </td>
                    <td>
                        <Input :maxlength='10' v-model="edit_shuffling_title" placeholder="请输入标题" style="width: 200px"></Input>
                    </td>
                </tr>
                <tr>
                    <td class="add-left">
                        <span style="color:red">*</span>
                        <span>状态：</span>
                    </td>
                    <td>
                        <Select v-model="edit_shuffling_status" style="width:200px">
                            <Option v-for="item in shufflingStatus" :value="item.status" :key="item.status" @on-change="shufflingStatusChange()"></Option>
                        </Select>
                    </td>
                </tr>
                <tr>
                    <td class="add-left">
                        <span style="color:red">*</span>
                        <span>封面图片：</span>
                    </td>
                    <td>
                        <div>
                           <div class="demo-upload-list" v-for="item in uploadList">
                                <img :src="item.url">
                           <!-- <div class="demo-upload-list">
                                <img :src="edit_shuffling_pic"> -->
                                <div class="demo-upload-list-cover">
                                    <!-- <Icon type="close-circled"></Icon> -->
                                    <Icon color="#ff5500" type="close-circled" @click.native="handleRemove(item)"></Icon>
                                </div>
                            </div>
                            <Upload 
                            ref="upload"
                            :show-upload-list="false" 
                            :on-success="handleSuccess"
                            :format="['jpg','jpeg','png']" 
                            :max-size="5120" 
                            :before-upload="handleBeforeUpload" 
                            :on-format-error="handleFormatError" 
                            :on-exceeded-size="handleMaxSize"
                            :on-progress="onProgress" 
                            :on-error="handleError"
                            multiple 
                            type="drag" 
                            :action="this.$store.state.uploadUrl"
                            style="display: inline-block;width:60px;">
                                <div style="width: 60px;height:57px;">
                                    <div style="padding-top: 10px;">
                                        <Icon type="plus-round" size="18" style="color: #aaa"></Icon>
                                    </div>
                                    <div style="font-size:12px; padding-top: -5px;">上传</div>
                                </div>
                            </Upload>
                            <div>(建议上传大小为100×100的图片)</div>
                        </div>
                    </td>
                    <!-- <td>
                        <Input v-model="edit_shuffling_url" placeholder="请输入详情链接" style="width: 200px"></Input>
                    </td> -->
                </tr>
            </table>
        </Modal>
        <!-- 排序轮播图 -->
        <Modal v-model="sortShufflingList" :mask-closable="false" title="排序(请使用鼠标拖动排序)" @on-ok="submitSortShuffling" @on-cancel="cancel">
            <div class="sortContent">
                <div class="sortTitle"><div>标题</div><div>序号</div></div>
                <draggable v-model="sortList" :options="{draggable:'.item'}" class="drag">
                    <!-- <div></div> -->
                    <div v-for="element in sortList" :key="element.id" class="item">
                        <div>{{element.title}}</div>
                        <div>{{element.shufflingNum}}</div>
                        <!-- {{element.TITLE}} -->
                    </div>
                    <!-- <button slot="footer" @click="addPeople">Add</button> -->
                </draggable>
            </div>
        </Modal>
        <!-- 修改轮播图停留时间 -->
        <Modal v-model="shufflingKeepTime" :mask-closable="false" title="停留时间" @on-ok="submitKeepTime" @on-cancel="sortCancel" :loading="newShuffling">
            <p>
                <span>请输入时间：</span>
                <Input :maxlength='6' v-model="keepTime" style="width: 200px" placeholder="请输入整数数字" autofocus @on-enter="submitKeepTime"></Input>
                <span style="color: #aaa">(秒)</span>
            </p>
        </Modal>
    </div>
</template>

<script>
export default {
    created() {
        this.$store.commit('SET_shufflingPage', true)
        this.$store.commit('SET_sportPage', false)
        this.uploadUrl = this.$store.state.uploadUrl
        console.log(this.uploadUrl)
        this.getShufflingList()
    },
    data() {
        return {
            addShufflingList: false,
            editShufflingList: false,
            sortShufflingList: false,
            shufflingKeepTime: false,
            // 用于Model校验
            newShuffling: true,
            shufflingTable: [
                {
                    title: '轮播图',
                    align: 'center',
                    key: 'PICTURE',
                    render: (h, params) => {
                        return h('img', {
                            attrs: {
                                'src': params.row.PICTURE,
                                'width': '100%',
                                'height': '50px',
                                'style': 'margin-top:5px;'
                            }
                        })
                    }
                },
                {
                    title: '序号',
                    align: 'center',
                    key: 'OREDER_NUMBER'
                },
                {
                    title: '标题',
                    align: 'center',
                    key: 'TITLE'
                },
                {
                    title: '更新时间',
                    align: 'center',
                    key: 'UPDATE_TIME'
                },
                // {
                //     title: '链接',
                //     align: 'center',
                //     key: 'LINK'
                // },
                {
                    title: '状态',
                    align: 'center',
                    key: 'STATUS'
                },
                {
                    title: '操作',
                    key: '11',
                    align: 'center',
                    width: '120px',
                    render: (h, params) => {
                        return h('div', [
                            h(
                                'a',
                                {
                                    props: {
                                        type: 'text',
                                        size: 'small'
                                    },
                                    on: {
                                        click: () => {
                                            this.editShuffling(params)
                                        }
                                    }
                                },
                                '编辑'
                            ),
                            h(
                                'a',
                                {
                                    props: {
                                        type: 'text',
                                        size: 'small',
                                    },
                                    on: {
                                        click: () => {
                                            this.deleteShuffling(params)
                                        }
                                    }
                                },
                                '删除'
                            )
                        ])
                    }
                }
            ],
            shufflingStatus: [
                {
                    status: '上线',
                    value: '上线'
                },
                {
                    status: '下线',
                    value: '下线'
                }
            ],
            edit_shuffling_index: '',
            edit_shuffling_title: '',
            edit_shuffling_status: '',
            edit_shuffling_pic: '',
            edit_shuffling_url: '',
            edit_shuffling_id: '',
            submit_shuffling_statu: '',
            file: [{url: '', name: ''}],
            loading: false,
            value: '',
            uploadList: [],
            uploadUrl: '',
            keepTime: 2,
            shufflingTotal: 1,
            shufflingCurrent: 1,
            shufflingPageSize: 10
        }
    },
    computed: {
        shufflingTableData() {
            let shufflingList = this.$store.state.shufflingList
            let tempObj = []
            try {
                shufflingList.map((item) => {
                    let status = ''
                    if (item.shufflingStatus) {
                        status = '上线'
                    } else {
                        status = '下线'
                    }
                    // 截取时间字符串
                    // item.updateDateString = item.updateDateString.slice(0, 10)
                    // console.log(item.updateDateString)
                    let a = {
                        ID: item.id,
                        PICTURE: item.imgUrl,
                        OREDER_NUMBER: item.shufflingNum,
                        TITLE: item.title,
                        LINK: item.url,
                        UPDATE_TIME: item.updateDateString,
                        STATUS: status,
                    }
                    tempObj.push(a)
                })
                return tempObj
            } catch (err) {}
        },
        sortList: {
            get() {
                return this.$store.state.sortList
            },
            set(value) {
                // this.$store.commit('SET_updateSortList', value)
                this.$store.commit('SET_sortList', value)
                // console.log(this.$store.state.updateSortList)
            }
        }
    },
    methods: {
        handleBeforeUpload(file) {
            // 创建一个 FileReader 对象
            let reader = new FileReader()
            // readAsDataURL 方法用于读取指定 Blob 或 File 的内容
            // 当读操作完成，readyState 变为 DONE，loadend 被触发，此时 result 属性包含数据：URL（以 base64 编码的字符串表示文件的数据）
            // 读取文件作为 URL 可访问地址
            reader.readAsDataURL(file)
            const _this = this
            const check = this.uploadList.length < 1
            if (!check) {
                this.$Message.warning({
                    content: '单次只能上传一张图片.'
                })
            } else {
                reader.onloadend = function(e) {
                    file.url = reader.result
                    _this.uploadList.push(file)
                    // if (_this.uploadList.url === '' || e.url === '' || _this.uploadList.length < 1) {
                    //     _this.editNotice('error', 5, '图片上传失败, 请检查图片上传配置文件')
                    //     setTimeout(() => {
                    //         _this.uploadList = []
                    //     }, 1500)
                    // }
                }
            }
            return check
        },
        handleRemove(file) {
            // const fileList = this.$refs.upload.fileList
            this.uploadList.splice(this.uploadList.indexOf(file), 1)
            this.edit_shuffling_pic = ''
        },
        handleSuccess(response, file) {
            const Vm = this
            console.log('response', response)
            if (response.status === 1000) {
                console.log('llllll-----', response.status)
                console.log('response', response)
                Vm.edit_shuffling_pic = response.result
                // Vm.editNotice('info', 5, response.msg)
                console.log('图片上传回调', Vm.edit_shuffling_pic)
                // this.uploadList = ''
                this.$Loading.finish()
            } else {
                Vm.$Message.warning({
                    content: response.msg,
                    duration: Vm.durationTime
                })
                this.$Loading.finish()
                // this.uploadList = []
            }
        },
        handleError(response) {
            console.log('fi3--', response)
            const Vm = this
            Vm.$Loading.error()
            if (response.path.length === 0) {
                Vm.editNotice('error', 5, '图片上传失败, 请检查图片上传配置文件')
                setTimeout(() => {
                    Vm.uploadList = []
                }, 1500)
            }
        },
        handleProgress(event, file) {
            console.log('pe', event)
            console.log('pl', file)
        },
        handleFormatError(file) {
            console.log(file)
            let Vm = this
            Vm.$Message.warning({
                content: '文件格式不正确，请上传 jpg 或 png 格式的图片',
                duration: Vm.durationTime
            })
            setTimeout(() => {
                this.uploadList = []
            }, 1500)
        },
        handleMaxSize(file) {
            this.$Message.warning({
                content: '文件大小应小于5M',
                duration: this.durationTime
            })
        },
        onProgress() {
            this.$Loading.start({
                color: '#5cb85c',
                failedColor: '#f0ad4e',
                height: 5
            })
        },
        changePage(current) {
            // this.$store.commit('SET_page', current)
            this.shufflingCurrent = current
            this.getShufflingList()
        },
        changePageSize(shufflingPageSize) {
            console.log(shufflingPageSize)
            this.shufflingPageSize = shufflingPageSize
            this.getShufflingList()
        },
        getShufflingList() {
            const Vm = this
            Vm.$store.dispatch('getAllShuffling', {
                pageNum: Vm.shufflingCurrent,
                pageSize: Vm.shufflingPageSize
            })
                .then(res => {
                    console.log(res)
                    if (res.data.status === 1000) {
                        Vm.$store.commit('SET_shufflingList', res.data.result)
                        Vm.shufflingTotal = res.data.total
                        Vm.keepTime = res.data.result[0].keepTime
                    } else {
                        this.$Message.info({
                            content: res.data.msg,
                            duration: 5
                        })
                    }
                })
        },
        getAllShuffling() {
            const Vm = this
            Vm.$store.dispatch('getAllShuffling', {
                pageNum: 1,
                pageSize: 100000
            })
                .then(res => {
                    console.log(res)
                    if (res.data.status === 1000) {
                        console.log(res)
                        Vm.$store.commit('SET_sortList', res.data.result)
                    } else {
                        this.$Message.info({
                            content: res.data.msg,
                            duration: 5
                        })
                    }
                })
        },
        remove(index) {
            this.data6.splice(index, 1)
        },
        addShuffling() {
            this.addShufflingList = true
            this.uploadList.name = ''
            this.uploadList.url = ''
            this.edit_shuffling_status = '下线'
            this.edit_shuffling_index = ''
            this.edit_shuffling_title = ''
            this.edit_shuffling_pic = ''
            this.edit_shuffling_url = ''
            this.edit_shuffling_id = ''
        },
        editShuffling(params) {
            const Vm = this
            console.log(params)
            let shufflingObj = params.row
            if (shufflingObj.STATUS === '上线') {
                Vm.edit_shuffling_status = '上线'
            } else {
                Vm.edit_shuffling_status = '下线'
            }
            console.log('与编辑', params)
            let file = []
            Vm.edit_shuffling_index = shufflingObj.OREDER_NUMBER
            Vm.edit_shuffling_title = shufflingObj.TITLE
            Vm.edit_shuffling_pic = shufflingObj.PICTURE
            Vm.edit_shuffling_url = shufflingObj.LINK
            Vm.edit_shuffling_id = shufflingObj.ID
            file.url = shufflingObj.PICTURE
            Vm.uploadList.push(file)
            // this.uploadList.url = shufflingObj.PICTURE
            // this.uploadList.name = shufflingObj.PICTURE
            console.log('upload', Vm.uploadList)
            Vm.editShufflingList = true
            console.log('imgsrc', Vm.edit_shuffling_pic)
        },
        editShufflingKeepTime() {
            // console.log(this.shufflingKeepTime)
            this.shufflingKeepTime = true
            // console.log(this.shufflingKeepTime)
        },
        deleteShuffling(params) {
            const Vm = this
            Vm.$Modal.confirm({
                content: '<b>是否删除该条信息？</b>',
                onOk: () => {
                    Vm.$store.dispatch('deleteShuffling', {
                        id: params.row.ID
                    }).then(res => {
                        if (res.data.status === 1000) {
                            Vm.$Message.info({
                                content: res.data.msg,
                                duration: 3
                            })
                            Vm.getShufflingList()
                        } else {
                            Vm.$Message.error({
                                content: res.data.msg,
                                duration: 3
                            })
                        }
                    })
                }
            })
        },
        sortShuffling() {
            this.getAllShuffling()
            let shufflingList = this.$store.state.sortList
            let tempObj = []
            try {
                // alert(1)
                shufflingList.map((item) => {
                    let status = ''
                    if (item.shufflingStatus) {
                        status = '上线'
                    } else {
                        status = '下线'
                    }
                    // 截取时间字符串
                    // item.updateDateString = item.updateDateString.slice(0, 10)
                    // console.log(item.updateDateString)
                    let a = {
                        ID: item.id,
                        PICTURE: item.imgUrl,
                        OREDER_NUMBER: item.shufflingNum,
                        TITLE: item.title,
                        LINK: item.url,
                        UPDATE_TIME: item.updateDateString,
                        STATUS: status,
                    }
                    tempObj.push(a)
                })
                this.$store.commit('SET_updateSortList', tempObj)
                console.log(this.$store.state.updateSortList)
                this.$store.commit('SET_sortList', tempObj)
            } catch (err) {}
            console.log(this.$store.state.sortList)
            this.sortShufflingList = true
        },
        submitKeepTime() {
            const Vm = this
            let reg = /^[0-9]*[1-9][0-9]*$/
            let reg2 = /^[a-zA-Z]+$/
            let isNM = reg2.test(Vm.keepTime)
            // alert(Vm.keepTime)
            if (Vm.keepTime === '') {
                Vm.editNotice('error', 3, '停留时间不能为空')
                setTimeout(() => {
                    this.newShuffling = false
                    this.$nextTick(() => {
                        this.newShuffling = true
                    }, 1000)
                })
            } else if (!reg.test(Vm.keepTime) || isNM) {
                Vm.editNotice('error', 3, '请输入整数数字')
                setTimeout(() => {
                    this.newShuffling = false
                    this.$nextTick(() => {
                        this.newShuffling = true
                    }, 1000)
                })
            } else {
                Vm.$store.dispatch('updateShufflingTime', {
                    keepTime: Vm.keepTime
                }).then(res => {
                    if (res.data.status === 1000) {
                        Vm.editNotice('info', 3, res.data.msg)
                    } else {
                        Vm.editNotice('error', 3, res.data.msg)
                    }
                    Vm.shufflingKeepTime = false
                })
            }
            setTimeout(() => {
                this.newShuffling = false
                this.$nextTick(() => {
                    this.newShuffling = true
                }, 1000)
            })
        },
        submitAddShuffling() {
            console.log(this.uploadList.url)
            const Vm = this
            console.log(this.edit_shuffling_status)
            // let doSubmit = false
            if (Vm.edit_shuffling_status === '上线') {
                Vm.submit_shuffling_statu = true
            } else {
                Vm.submit_shuffling_statu = false
            }
            if (Vm.edit_shuffling_url === '') {
                Vm.edit_shuffling_url = 'def'
            }
            // 校验输入信息
            let reg = /^[0-9]*[1-9][0-9]*$/
            let reg2 = /^[a-zA-Z]+$/
            let isNM = reg2.test(Vm.edit_shuffling_index)
            Vm.edit_shuffling_title = Vm.edit_shuffling_title.replace(/(^\s*)|(\s*$)/g, '')
            if (Vm.edit_shuffling_index === '') {
                Vm.editNotice('error', 3, '序号不能为空')
                setTimeout(() => {
                    Vm.newShuffling = false
                    Vm.$nextTick(() => {
                        Vm.newShuffling = true
                    }, 1000)
                })
            } else if (!reg.test(Vm.edit_shuffling_index) || isNM) {
                Vm.editNotice('error', 3, '序号必须为整数数字')
                setTimeout(() => {
                    Vm.newShuffling = false
                    Vm.$nextTick(() => {
                        Vm.newShuffling = true
                    }, 1000)
                })
            } else {
                Vm.$store.dispatch('checkShufflingAdd', {
                    shufflingNum: this.edit_shuffling_index
                }).then(res => {
                    console.log(res)
                    if (res.data.status === 1000) {
                        if (Vm.edit_shuffling_index === '') {
                            Vm.editNotice('error', 3, '序号不能为空')
                            setTimeout(() => {
                                Vm.newShuffling = false
                                Vm.$nextTick(() => {
                                    Vm.newShuffling = true
                                }, 1000)
                            })
                        } else if (!reg.test(Vm.edit_shuffling_index) || isNM) {
                            Vm.editNotice('error', 3, '序号必须为整数数字')
                            setTimeout(() => {
                                Vm.newShuffling = false
                                Vm.$nextTick(() => {
                                    Vm.newShuffling = true
                                }, 1000)
                            })
                        } else if (Vm.edit_shuffling_title === '') {
                            Vm.editNotice('error', 3, '标题不能为空')
                            setTimeout(() => {
                                Vm.newShuffling = false
                                Vm.$nextTick(() => {
                                    Vm.newShuffling = true
                                }, 1000)
                            })
                        } else if (Vm.submit_shuffling_statu === '') {
                            Vm.editNotice('error', 3, '轮播图状态不能为空')
                            setTimeout(() => {
                                Vm.newShuffling = false
                                Vm.$nextTick(() => {
                                    Vm.newShuffling = true
                                }, 1000)
                            })
                        } else if (Vm.edit_shuffling_pic === '') {
                            Vm.editNotice('error', 3, '图片不能为空')
                            setTimeout(() => {
                                Vm.newShuffling = false
                                Vm.$nextTick(() => {
                                    Vm.newShuffling = true
                                }, 1000)
                            })
                        } else {
                            // doSubmit = true
                            doAction()
                        }
                    } else {
                        // ee
                        Vm.editNotice('error', 3, '已有此序号')
                        setTimeout(() => {
                            Vm.newShuffling = false
                            Vm.$nextTick(() => {
                                Vm.newShuffling = true
                            }, 1000)
                        })
                    }
                })
            }
            function doAction() {
                Vm.$store.dispatch('addShuffling', {
                    id: Vm.edit_shuffling_id,
                    shufflingNum: Vm.edit_shuffling_index,
                    imgUrl: Vm.edit_shuffling_pic,
                    title: Vm.edit_shuffling_title,
                    url: Vm.edit_shuffling_url,
                    shufflingStatus: Vm.submit_shuffling_statu,
                    keepTime: Vm.keepTime
                }).then(res => {
                    if (res.data.status === 1000) {
                        Vm.$Message.info({
                            content: res.data.msg,
                            duration: 3
                        })
                        Vm.getShufflingList()
                        Vm.edit_shuffling_index = ''
                        Vm.edit_shuffling_title = ''
                        Vm.edit_shuffling_pic = ''
                        Vm.edit_shuffling_url = ''
                        Vm.edit_shuffling_id = ''
                        Vm.file.url = ''
                        Vm.uploadList = []
                    } else {
                        Vm.$Message.error({
                            content: res.data.msg,
                            duration: 3
                        })
                    }
                    Vm.addShufflingList = false
                })
                Vm.uploadList = []
            }
        },
        submitEditShuffling() {
            const Vm = this
            console.log(this.edit_shuffling_status)
            if (Vm.edit_shuffling_status === '上线') {
                Vm.submit_shuffling_statu = true
            } else {
                Vm.submit_shuffling_statu = false
            }

            // let doSubmit = false
            let reg = /^[0-9]*[1-9][0-9]*$/
            let reg2 = /^[a-zA-Z]+$/
            let isNM = reg2.test(Vm.edit_shuffling_index)
            Vm.edit_shuffling_title = Vm.edit_shuffling_title.replace(/(^\s*)|(\s*$)/g, '')
            if (Vm.edit_shuffling_index === '') {
                Vm.editNotice('error', 3, '序号不能为空')
                setTimeout(() => {
                    Vm.newShuffling = false
                    Vm.$nextTick(() => {
                        Vm.newShuffling = true
                    }, 1000)
                })
            } else if (!reg.test(Vm.edit_shuffling_index) || isNM) {
                Vm.editNotice('error', 3, '序号必须为整数数字')
                setTimeout(() => {
                    Vm.newShuffling = false
                    Vm.$nextTick(() => {
                        Vm.newShuffling = true
                    }, 1000)
                })
            } else {
                Vm.$store.dispatch('checkShufflingUpdate', {
                    shufflingNum: Vm.edit_shuffling_index,
                    id: Vm.edit_shuffling_id
                }).then(res => {
                    if (res.data.status === 1000) {
                        if (Vm.edit_shuffling_index === '') {
                            Vm.editNotice('error', 3, '序号不能为空')
                            setTimeout(() => {
                                Vm.newShuffling = false
                                Vm.$nextTick(() => {
                                    Vm.newShuffling = true
                                }, 1000)
                            })
                        } else if (!reg.test(Vm.edit_shuffling_index) || isNM) {
                            Vm.editNotice('error', 3, '序号必须为整数数字')
                            setTimeout(() => {
                                Vm.newShuffling = false
                                Vm.$nextTick(() => {
                                    Vm.newShuffling = true
                                }, 1000)
                            })
                        } else if (Vm.edit_shuffling_title === '') {
                            Vm.editNotice('error', 3, '标题不能为空')
                            setTimeout(() => {
                                Vm.newShuffling = false
                                Vm.$nextTick(() => {
                                    Vm.newShuffling = true
                                }, 1000)
                            })
                        } else if (Vm.submit_shuffling_statu === '') {
                            Vm.editNotice('error', 3, '轮播图状态不能为空')
                            setTimeout(() => {
                                Vm.newShuffling = false
                                Vm.$nextTick(() => {
                                    Vm.newShuffling = true
                                }, 1000)
                            })
                        } else if (Vm.edit_shuffling_pic === '') {
                            Vm.editNotice('error', 3, '图片不能为空')
                            setTimeout(() => {
                                Vm.newShuffling = false
                                Vm.$nextTick(() => {
                                    Vm.newShuffling = true
                                }, 1000)
                            })
                        } else {
                            // doSubmit = true
                            doAction()
                        }
                    } else {
                        Vm.editNotice('error', 3, '已有此序号')
                        setTimeout(() => {
                            Vm.newShuffling = false
                            Vm.$nextTick(() => {
                                Vm.newShuffling = true
                            }, 1000)
                        })
                    }
                })
            }
            // if (Vm.edit_shuffling_pic)
            // console.log('indexof', Vm.edit_shuffling_pic.indexOf('/upload'))
            function doAction() {
                let tempPath = Vm.edit_shuffling_pic.substr(Vm.edit_shuffling_pic.indexOf('/upload'), Vm.edit_shuffling_pic.length)
                console.log(tempPath)
                Vm.$store.dispatch('updateShuffling', {
                    shufflingNum: Vm.edit_shuffling_index,
                    imgUrl: tempPath,
                    title: Vm.edit_shuffling_title,
                    url: Vm.edit_shuffling_url,
                    shufflingStatus: Vm.submit_shuffling_statu,
                    keepTime: Vm.keepTime,
                    id: Vm.edit_shuffling_id
                }).then(res => {
                    if (res.data.status === 1000) {
                        Vm.$Message.info({
                            content: res.data.msg,
                            duration: 3
                        })
                        Vm.getShufflingList()
                        Vm.edit_shuffling_index = ''
                        Vm.edit_shuffling_title = ''
                        Vm.edit_shuffling_pic = ''
                        Vm.edit_shuffling_url = ''
                        Vm.edit_shuffling_id = ''
                        Vm.file.url = ''
                        Vm.uploadList = []
                    } else {
                        Vm.$Message.error({
                            content: res.data.msg,
                            duration: 3
                        })
                    }
                    Vm.editShufflingList = false
                })
                Vm.uploadList = []
            }
            setTimeout(() => {
                this.newShuffling = false
                this.$nextTick(() => {
                    this.newShuffling = true
                }, 1000)
            })
        },
        submitSortShuffling() {
            const Vm = this
            let tempObj = []
            let sortList = {sort: '', pageNum: '', pageSize: ''}
            // let b = ''
            // let c = ''
            try {
                // console.log('旧数据', Vm.$store.state.updateSortList)
                // console.log('ssssss---', Vm.$store.state.sortList)
                Vm.$store.state.sortList.map((item, index) => {
                    // 交换新旧列表的序号
                    // Vm.$store.state.updateSortList.map((list) => {
                    //     if (item.ID === list.ID) {
                    //         // let tempNum = item.ID
                    //         b = list.OREDER_NUMBER
                    //         c = true
                    //         // list.ID = tempNum
                    //     } else {
                    //         c = false
                    //     }
                    // // if (item.ID === Vm.$store.state.updateSortList[index].ID) {
                    // //     b = Vm.$store.state.updateSortList[index].OREDER_NUMBER
                    // // }
                    //     console.log(item.OREDER_NUMBER, list.OREDER_NUMBER, c)
                    // })
                    let a = {
                        // index: index,
                        // title: item.TITLE,
                        key: item.id,
                        value: item.shufflingNum,
                    }
                    tempObj.push(a)
                })
            } catch (err) {}
            sortList.sort = tempObj
            sortList.pageNum = Vm.shufflingCurrent
            sortList.pageSize = Vm.shufflingPageSize
            console.log('sublist', sortList)
            Vm.$store.dispatch('sortShuffling', sortList)
                .then(res => {
                    if (res.data.status === 1000) {
                        Vm.$Message.info({
                            content: res.data.msg,
                            duration: 3
                        })
                        Vm.getShufflingList()
                    } else {
                        Vm.$Message.error({
                            content: res.data.msg,
                            duration: 3
                        })
                    }
                })
        },
        shufflingCancel() {
            this.$Loading.finish()
            this.edit_shuffling_index = ''
            this.edit_shuffling_title = ''
            this.edit_shuffling_pic = ''
            this.edit_shuffling_url = ''
            this.edit_shuffling_id = ''
            this.file.url = ''
            this.uploadList = []
        },
        cancel() {},
        sortCancel() {
            this.uploadList = []
        },
        shufflingStatusChange() {},
        // 用户Message信息提示函数
        editNotice(type, time, content) {
            switch (type) {
            case 'info':
                this.$Message.info({
                    content: content,
                    duration: time
                })
                break
            case 'error':
                this.$Message.error({
                    content: content,
                    duration: time
                })
                break
            case 'success':
                this.$Message.success({
                    content: content,
                    duration: time
                })
                break
            }
        }
    }
}
</script>

<style lang="less" scoped>
.shuffling {
    width: calc(~'100% - 5px');
    min-width: 1000px;
    // max-width: 1200px;
    // display: flex;
    // display: inline-block;
    .topTableStyle {
        width: 100%;
        margin-bottom: 10px;
    }
}
td.add-left {
    text-align: right;
}
.tablePup {
    tr {
        margin-bottom: 5px;
        line-height: 40px;
    }
    tr:nth-child(4) {
        line-height: 15px;
    }
}
.bottom {
    padding-top: 20px;
}
.demo-upload-list {
    display: inline-block;
    width: 58px;
    height: 58px;
    text-align: center;
    line-height: 58px;
    border: 1px solid transparent;
    border-radius: 4px;
    // overflow: hidden;
    background: #fff;
    position: relative;
    box-shadow: 0 1px 1px rgba(0, 0, 0, .2);
    margin-right: 4px;
}

.demo-upload-list img {
    width: 100%;
    height: 100%;
}

.demo-upload-list-cover {
    // display: none;
    display: block;
    position: absolute;
    top: -20px;
    // bottom: 0;
    // left: 0;
    right: -4px;
    // background: rgba(0, 0, 0, .6);
}

// .demo-upload-list:hover .demo-upload-list-cover {
//     display: block;
// }

.demo-upload-list-cover i {
    color: #fff;
    font-size: 20px;
    cursor: pointer;
    // margin: 0 2px;
}
.sortContent {
    width: 100%;
    // background: orange;
    .sortTitle {
        width: 100%;
        height: 30px;
        display: flex;
        flex-direction: columnl;
        line-height: 30px;
        font-weight: 600;
        // margin-bottom: 10px;
        div {
            // display: flex;
            // flex-direction: row;
            text-align: center;
            width: 50%;
        }
    }
    .drag {
        // background: papayawhip;
        width: 100%;
        height: 400px;
        overflow-y: auto;
        .item {
            width: 100%;
            display: flex;
            height: 25px;
            flex-direction: columnl;
            overflow-y: auto;
            div {
                text-align: center;
                width: 50%;
                line-height: 25px;
            }
        }
        .item:hover {
            background: #ddd;
        }
    }
}
// .loadingData {
//     margin-top: 10px !important;
// }
</style>
